<template>
  <div id="cloud_memory" ref="cloud_memory" :class="[boxWidth,boxHeight]"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'cloudMemory',
  props: {
    boxWidth: {
      type: String
    },
    boxHeight: {
      type: String
    },
    colorStart: {
      type: String,
      default: '#8D98F0'
    },
    colorStop: {
      type: String,
      default: '#6F88E0'
    },
    cloudName: {
      type: String
    },
    totalSpace: {
      type: String
    },
    currentSpace: {
      type: String
    }
  },
  methods: {
    getCloudOption (cloudName, totalCount, useCount) {
      const color_start = this.colorStart
      const color_stop = this.colorStop
      const totalSpace = totalCount.slice(0, -1) - 0;
      const currentSpace = useCount.slice(0, -1) - 0;
      return {
        title: {
          show: true,
          text: cloudName,
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: '18',
            color: '#333'
            // fontWeight:"bold",
          }
        },
        //  提示框组件
        tooltip: {
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
        },
        series: [
          {
            // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            name: '使用量',
            type: 'pie',
            // 饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: ['50%', '70%'],
            // 是否启用防止标签重叠策略，默认开启
            avoidLabelOverlap: false,
            hoverAnimation: false,
            // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
            labelLine: {
              normal: {
                show: false
              }
            },
            color: [{
              type: 'linear',
              // x: 0,
              // y: 0,
              // x2: 0.4,
              // y2: 1,
              colorStops: [{
                offset: 0,
                color: color_start // 0% 处的颜色
              }, {
                offset: 1,
                color: color_stop // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }, 'none'],
            data: [
              {
                value: currentSpace,
                name: '已使用',
                selected: false,
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    fontSize: 17,
                    // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                    formatter: `${((currentSpace / totalSpace) * 100).toFixed(2)}%\n${this.currentSpace}/${this.totalSpace}`
                  }
                }
                // itemStyle: {normal: {color: 'red'}}
              },
              {
                value: totalSpace - currentSpace,
                name: '未使用',
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: { normal: { color: '#F5F5F5' }, emphasis: { color: '#F9F9F9' } } // normal 默认状态下的颜色  emphasis: 高亮状态下的颜色(鼠标悬浮等)
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    const cloud_memory = echarts.init(this.$refs.cloud_memory)
    const cloud_memory_option = this.getCloudOption(this.cloudName, this.totalSpace, this.currentSpace)
    cloud_memory.setOption(cloud_memory_option)
  }
}
</script>

<style scoped>

</style>
